<template>
  <div class="search-input" >
    <div class="show-checked-info" @click.stop="handleContentInfo">
      <div class="show-checked-item" v-for="(item, key) in checkedData">
        <div class="show-checked-item-name">{{item[showField]}}</div>
        <div class="show-checked-item-close" @click.stop="handleCheckedDelete(key)">
          <el-icon>
            <Close></Close>
          </el-icon>
        </div>
      </div>
    </div>
    <div class="show-content-info" v-show="contentVisiable" @click.stop>
      <div style="padding: 5px">
        <el-input v-model="reValue" clearable @input="handleInputChange"></el-input>
      </div>
      <div class="show-content-list">
        <div class="show-content-item" @click="handleClick(index)" style="padding: 0px 5px " v-for="(item,index) in searchResult">
          <el-icon v-if="item.__checked">
            <Check></Check>
          </el-icon>
          {{item[showField]}}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ElInput} from "element-plus";
import {inject, nextTick, onMounted, reactive, ref, toRaw} from "vue";
import {AXIOS_NAME} from '@/constant/constant'
import {EChangeState, type ISearchInput} from "@/components/plugs/input/SearchInputInterface";
import {Check, Close} from "@element-plus/icons-vue";
import {isEmpty} from "lodash";

const props = withDefaults(defineProps<ISearchInput>(),{
  checkedChange:(data:{[key: string] : any},state:EChangeState) => {}
});

const contentVisiable=  ref(false);
const $axiso:any = inject(AXIOS_NAME);
const {url,idField,showField,paramFormat,checkedChange} = props;
const reValue = ref("");
const searchResult:any = reactive([]);
const checkedData:any = reactive({});
const getAjaxData = () =>{
  const params = paramFormat(reValue.value);
  $axiso.post(url,params).then((response:any) => {
    const data = response.data;
    searchResult.clear();
    searchResult.pushAll(data.data);
    searchResult.forEach((item:{[key: string] :any},index:number) => {
        if(checkedData.hasOwnProperty(item[idField])){
          item.__checked = true;
        }
    });
  });
}
let timeout!:number;
const handleInputChange = () => {
  if(isEmpty(reValue.value)){
    return;
  }
  if(timeout){
    clearTimeout(timeout);
  }
  timeout = setTimeout(function (){
    getAjaxData();
  },200);
}

const handleClick = (index:number) =>{
  const rowData:{ [key : string] : any } = searchResult[index];
  const key:string = rowData[<string>idField];
  rowData.__checked = (rowData.__checked == null || rowData.__checked == undefined) ? true : !rowData.__checked;
  if(!rowData.__checked){
    handleCheckedDelete(rowData[idField]);
  }else {
    checkedData[key] = rowData;
    checkedChange(checkedData[key],EChangeState.ADD);
  }
}

const handleCheckedDelete = (key:string) =>{
  if(!checkedData.hasOwnProperty(key)){
    return;
  }
  checkedChange(checkedData[key],EChangeState.DELETE);
  checkedData[key].__checked = false;
  delete checkedData[key];
}

const handleContentInfo = () => {
  contentVisiable.value = !contentVisiable.value;
}


onMounted(() =>{
  getAjaxData();
  window.addEventListener('click', function (e){
    e.stopPropagation();
    e.stopImmediatePropagation();
    contentVisiable.value = false;
  });
});
const getData = () => {
  const result:{[key: string] : any} = toRaw(checkedData);
  let array:Array<any> = [];
  for(const key in result){
      delete result.__checked;
      array.push(result[<string>key]);
  }
  return array;
}
const setData = (data:any[]) => {
 nextTick(() => {
   debugger;
   data.forEach((item,index) =>{
     item.__checked = true;
     checkedData[item[idField]] = item;
   })
 });
}
defineExpose({getData,setData});
</script>

<style scoped>
.search-input{
  width: 200px;
  position: relative
}
.show-checked-info{
  padding-left: 5px;
  padding-bottom: 5px;
  width:100%;
  min-height: 35px;
  max-height: 100px;
  border: 1px solid #C2C6CE;
  border-radius: 5px;
  overflow: auto;
}
.show-content-info{
  position: absolute;
  left: 0px;
  height: 200px;
  width: 100%;
  border-bottom: 1px solid #C2C6CE;
  border-left: 1px solid #C2C6CE;
  border-right: 1px solid #C2C6CE;
  z-index: 9999999;
  background-color: white;
}
.show-content-item{
  line-height: 30px;
  cursor: pointer;
}
.show-content-item:hover{
  background-color: #409EFF;
  color: white;
}
.show-checked-item{
  border: 1px solid #C2C6CE;
  width: auto;
  float: left;
  line-height: 22px;
  padding-left: 5px;
  margin-top: 5px;
  border-radius: 5px;
  margin-right: 5px;
}
.show-checked-item-name{
  width: auto;float: left;color: #606266
}
.show-checked-item-close{
  float: left;margin-top: 2px;cursor: pointer;
}
.show-content-list{
  height: calc(100% - 50px);
  overflow: auto;
}
</style>